import React, { PureComponent } from 'react';
import { connect } from 'dva';
import Authorized from '@/utils/Authorized';
import { message, Row, Col, Table, Modal, Divider, InputNumber, Slider, Button, Input, Popconfirm, Empty, Tag } from 'antd';

@connect(({ paper }) => ({

}))
class Score extends PureComponent {
  state = {
    inputValue: 1,
    score: {},
    display: false,
  }

  componentDidMount() {
    const { dispatch, userId, questionId } = this.props;
    if (userId && questionId) {
      dispatch({
        type: 'paper/getScore',
        payload: {
          'userId': userId,
          'questionId': questionId,
        },
        callback: (res) => {
          if (res) {
            this.setState({
              'score': res,
              'inputValue': res.score,
              'display': true,
            })
          }
        }
      })
    }
  }

  onChange = (value) => {
    this.setState({
      inputValue: value,
    });
  }

  handleClick = () => {
    const { dispatch, userId, questionId, competitionId } = this.props;
    const { inputValue } = this.state;
    dispatch({
      type: 'paper/setScore',
      payload: {
        'score': inputValue,
        'userId': userId,
        'questionId': questionId,
        'competitionId': competitionId,
      },
      callback: (res) => {
        if (res) {
          this.setState({
            'display': true,
          })
          message.success('评分完成');
        }
      }
    })
  }

  render() {
    const { inputValue, score, display } = this.state;
    const { question } = this.props;
    console.log(question)
    return (
      <Authorized authority="teacher">
        <Row>
          <Divider />
          <Col span={12}>
            <Slider
              min={0}
              max={question && question.value}
              value={typeof inputValue === 'number' ? inputValue : 0}
              onChange={this.onChange}
              disabled={display}
            />
          </Col>
          <Col span={4}>
            <InputNumber
              min={0}
              max={question && question.value}
              style={{ marginLeft: 16 }}
              value={inputValue}
              onChange={this.onChange}
              disabled={display}
            />
          </Col>
          <Col>
            <Button type="primary" disabled={display} onClick={this.handleClick}>
              评分
            </Button>
          </Col>
        </Row>
      </Authorized>
    )
  }
}
export default Score